<template>
  <keep-alive>
    <component :is="currentComp"></component>
  </keep-alive>
</template>

<script lang="ts">
import Vue, { VueConstructor } from "vue";
import VueCompositionAPI, { computed } from "@vue/composition-api";
import ContentGood from "./../content-good/content-good.vue";
import ContentSeller from "./../content-seller/content-seller.vue";
import ContentRemark from "./../content-remarks/content-remarks.vue";

Vue.use(VueCompositionAPI);
// 接口声明
interface VueCompoentsMap {
  [key: number]: VueConstructor;
}
// 组件索引表
const componentMap: VueCompoentsMap = {
  0: ContentGood,
  1: ContentRemark,
  2: ContentSeller,
};

export default Vue.extend({
  // 组件注册
  components: {
    ContentGood,
    ContentSeller,
    ContentRemark,
  },
  // 注册props
  props: {
    displayCompIndex: Number,
  },
  // 组合API
  setup(props) {
    // 当前组件计算属性
    const currentComp = computed(() => {
      if (typeof props.displayCompIndex === "number") {
        const currComp = componentMap[props.displayCompIndex];
        return currComp == null ? componentMap[0] : currComp;
      }
    });
    return {
      currentComp,
    };
  },
});
</script>

<style lang="stylus" scoped></style>
